<template>
	<view class="">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="门店" color="#ffffff"
			:backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<fixed :top="configInfo.navBarHeight">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<fixed>
				<search @input="toSearch" type="input" :padding="30" :radius="0" backgroundColor="#fff"
					placeholder="请输入场地名称">
				</search>
			</fixed>
			<!-- #endif -->
			<view class="store-box pt-md pl-md pr-md" v-if="isLoad">
				<block v-for="(item,index) in list.data" :key="index">
					<view class="mb-md radius-16 fill-base pd-lg flex-center"
						@tap="$util.goUrl({url: `/business/pages/store/detail?id=${item.id}`})">
						<image :src="item.cover" mode="aspectFill" class="store-img radius-16"></image>
						<view class="flex-1 pl-md">
							<view class="flex-between pb-md">
								<text class="text-bold f-title ellipsis max-400">{{item.name}}</text>
								<text class="f-desc"
									:style="{color: primaryColor}">{{item.distance | handleDistance}}km</text>
							</view>
							<view class="flex pt-md">
								<i class="iconfont iconjuli1"
									style="color: #5A5A5D;font-size: 13px;margin-right: 2px;margin-top: 4rpx;"></i>
								<text style="color: #5A5A5D;"
									class="f-caption ellipsis-2">{{item.address+item.info}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>


			<abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor>
			<view class="space-footer"></view>
			<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
			<tabbar :cur="8"></tabbar>

			<!-- #ifdef APP-PLUS -->
			<login-info></login-info>
			<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	let play = null
	import tabbar from "@/components/tabbar.vue"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				options: {},
				loading: true,
				isLoad: false
			}
		},
		computed: mapState({
			pageActive: state => state.pagestore.pageActive,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			autograph: state => state.user.autograph,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
			isGzhLogin: state => state.user.isGzhLogin,
			param: state => state.pagestore.param,
			list: state => state.pagestore.list,
		}),
		filters: {
			handleDistance(val) {
				return val && (val / 1000).toFixed(2)
			}
		},
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapActions(['getStoreList', 'getConfigInfo']),
			...mapMutations(['updateStoreItem', 'updateUserItem']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.toAppShare()
				}
				// #endif
				let {
					pid = 0
				} = this.options
				let {
					isGzhLogin
				} = this


				// if (!refresh && this.pageActive && !pid) {
				// 	this.isLoad = true
				// 	this.loading = false
				// 	this.$util.hideAll()
				// 	return
				// }

				let {
					id: uid = 0
				} = this.userInfo
				if (pid && !uid) {
					// #ifdef H5
					if (isGzhLogin) {
						setTimeout(() => {
							this.getUserInfo()
						}, 1000)
					} else {
						this.getUserInfo()
					}
					// #endif
					// #ifndef H5
					await this.getUserInfo()
					// #endif 
				}
				let {
					location
				} = this
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				if (!location.lng || !location.lat) {
					// #ifdef H5
					if (this.$jweixin.isWechat()) {
						this.$util.showLoading()
						// await this.$jweixin.initJssdk();
						await this.$jweixin.wxReady2();
						let {
							latitude: lat = 0,
							longitude: lng = 0
						} = await this.$jweixin.getWxLocation()
						location = {
							lng,
							lat,
							address: '定位失败',
							province: '',
							city: '',
							district: ''
						}
					}
					// #endif
					// #ifndef H5
					location = await this.$util.getBmapLocation()
					// #endif
					this.updateUserItem({
						key: 'location',
						val: location
					})
				}
				let {
					lng = 0,
						lat = 0
				} = location
				await this.updateStoreItem({
					key: 'param',
					val: {
						page: 1,
						name: '',
						lng,
						lat,
						limit: 10
					}
				})
				await this.getStoreList(this.param)
				await this.updateStoreItem({
					key: 'pageActive',
					val: true
				})
				this.isLoad = true
				this.$util.hideAll()
			},
			async initRefresh(page = 1) {
				let param = this.$util.deepCopy(this.param)
				param.page = page
				await this.updateStoreItem({
					key: 'param',
					val: param
				})
				await this.getStoreList(param)
				this.loading = false;
				this.$util.hideAll()
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let title = '门店'
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/pages/store?pid=${pid}`
				let imageUrl = ''
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, '', href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
			},
			async toSearch(val) {
				clearTimeout(play)
				play = setTimeout(async () => {
					this.$util.showLoading()
					let param = this.$util.deepCopy(this.param)
					param.name = val
					await this.updateStoreItem({
						key: 'param',
						val: param
					})
					await this.getStoreList(param)
					this.$util.hideAll()
				}, 1000)
			}
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.loading = true;
			this.$util.showLoading()
			this.initRefresh(this.param.page + 1)
		},
	}
</script>

<style lang="scss">
	/deep/ .search-box {
		background: transparent !important;

		.iconfont {
			color: #fff;
		}

		.search-item {
			background: rgba(41, 27, 98, 0.9) !important;

		}
	}

	.store-box {
		.store-img {
			width: 135rpx;
			height: 135rpx;
		}
	}
</style>